<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <button @click="del">删除</button>
        <button @click="add">新增</button>
        <button @click="put">修改</button>
        <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        axios.defaults.baseURL = 'http://localhost:3000/';

        // 我们每次发送的请求 或者响应都会被axios的拦截器所监听到
        // 在axios请求成功,返回的结果中,我们要的结果被包含在 data 的字段中 , 我们可以使用响应拦截器,将数据抽出来
        // 请求拦截器 发送请求之前会进入请求拦截器
        axios.interceptors.request.use(
            function (config) {
                console.log(config);
                // 挂载sex字段
                config.sex = "man"
                return config;
            },
            function (error) {
                // Do something with request error
                return Promise.reject(error);
            }
        );
        // 响应拦截器 响应之前会进入响应拦截器
        axios.interceptors.response.use(function (res) {
            console.log('响应');
            console.log(res);
            // 在响应拦截器中 将data 剥离
            return res.data;
        });

        const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                // 删除id为1的数据
                del() {
                    axios.delete('fruits/1')
                        .then(res => {
                            console.log(res.data); // 响应结果是一个空对象,表示删除成功
                        })
                },
                // 添加数据  发送post请求的时候,需要携带参数, name
                add() {
                    axios.post('fruits/', {
                            name: "梨"
                        })
                        .then(res => {
                            console.log(res);
                        })
                },
                // put更改数据  将id为4的水果名称修改为 猕猴桃
                put() {
                    axios.put('fruits/4', {
                            name: "猕猴桃"
                        })
                        .then(res => {
                            console.log(res);
                        })
                }
            },
            created() {
                axios.get('fruits').then(res => {
                    console.log(res);
                    this.list = res
                })
            }
        })
    </script>
</body>

</html>